<template>
    <div class="photoinfo-cantianer">
        <h4 class="title">{{PhotoInfo.title}}</h4>
        <div class="thumb-img-list">
            <!-- <img :src="item.src" alt="" v-for="(item,i) in photolist" :key="i"> -->

            <img class="preview-img" v-for="(item, index) in photolist" :src="item.src" height="100" 
            @click="$preview.open(index, photolist)" :key="index">  
        
        </div>
        
        <p class="info">
            <span>发表时间：{{PhotoInfo.add_time | dateFormat}}  </span>
            <span>点击次数：{{PhotoInfo.click}}次</span>                  
        </p>
        

        <div class="photo-info" v-html="PhotoInfo.content"></div>

        <comment :newsid="id"></comment>
    </div>
</template>

<script>
//导入组件
import comment from '../sub-conponents/Comment.vue'

// import mui from '../../lib/mui/js/mui.js'
// // import '../../lib/mui/js/mui.previewimage.js'
// // import '../../lib/mui/js/mui.zoom.js'


export default {
    data(){
        return{
            PhotoInfo:{},//图片信息
            photolist:[],//缩略图数组
        };
    },

    created(){
        this.getPhotoInfo();
        this.getThumImages();
    },

    methods:{
        async getPhotoInfo(id){
            //当调用一个异步方法，同时这个异步方法返回值是promise对象，才可以用await和async
            const{data} = await this.$http.get('api/getimageInfo/'+ this.id)
            if(data.status === 0) return (this.PhotoInfo = data.message[0])
        },
        
        async getThumImages(){
            const{data} = await this.$http.get('api/getthumimages/'+ this.id)
            if(data.status === 0) {
                data.message.forEach(item=>{
                    item.w = 600;
                    item.h = 400;
                })
                this.photolist = data.message;

            }
            
        },
    },
    props:['id'],
    components:{
        //注册组件
        comment
    },
}
</script>


<style lang="scss" scoped>
    .title{
        color:cadetblue;
        font-size:15px;
        text-align: center;
        margin:15px 0;
    }

    .info{
        font-size:12px;
        display: flex;
        justify-content: space-between;

    }

    .photoinfo-cantianer{
        padding:3px;
    }

    .photo-info{
        font-size:14px;
        line-height: 30px;
        text-indent: 2px;
    }


    .thumb-img-list{
        img{
            width:150px;
            height: 150px;
        }
    }
</style>